<template name="ztext">
	<view>
		<!-- <text class="question">{{que}}<text class="tip" v-if="!empty">*</text></text> -->
		<view id="answer-view" class="row-arrange">

			<input v-if="restrict==1" v-bind:maxlength="length" type="number" class="answer-input theme-input" @input="count" v-model="value">
			<textarea v-else v-bind:maxlength="length" class="answer-input theme-input" :style="{height:input_height}" @input="count" v-model="value"></textarea>
			<text class="count-text">({{curLength}}/{{length}})</text>
			
		</view>
		<text class="tip" v-if="errorText.length>0">{{errorText}}</text>
	</view>
</template>

<script>
	export default {
		name : "ztext",
		data() {
			return {
				value : "",
				errorText : "",
				curLength : 0,
				// input_height : ""
				// question : "问题"
			};
		},
		props : {
			compType : {
				type : String,
				default : "ztext"
			},
			restrict : {
				type : Number,
				// value : 0
				default : 0
			},
			length : {
				type : Number,
				// value : 100
				default : 100
			},
			empty : {
				type : Boolean,
				// value : true，
				default : true
			},
			que : {
				type : String,
				default : "问题"
			}
		},
		created : function(e){
			
		},
		computed : {
			input_height : function(){
				// 计算行数
				var lineNum = Math.ceil(this.length / 14);
				// console.log(lineNum)
				// 设置高度
				return uni.upx2px(lineNum * 50) + 'px';
			}
		},
		methods: {
			count : function(e){
				this.curLength = e.detail.value.length;
				if(this.value.length > this.length + 1){
					this.errorText = "长度超出限制";
				}else{
					this.errorText = "";
				}
			},
			get : function(){
				// 全为数字
				if(this.restrict == 1){
					var patt = /^[0-9]*$/;
					if(!patt.test(this.value)){
						this.errorText = '请输入正确的数字';
						return null;
					}
				}
				// 邮箱
				if(this.restrict == 2){
					var patrn = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
					if (!patrn.test(this.value)){
						this.errorText = '请输入正确的邮箱';
						return null;
					}
				}
				// 电话
				if(this.restrict == 3){
					var patrn=/(86)*0*1\d{10}/ ;
					if (!patrn.test(this.value)){
						this.errorText = '请输入正确的手机号';
						return null;
					}
				}
				// 身份证号
				if(this.restrict == 4){
					var patrn=/\d{18}|\d{15} / ;
					if (!patrn.test(this.value)){
						this.errorText = '请输入正确的身份证号';
						return null;
					}
				}
				// 检查长度是否满足要求
				if(this.value.length > this.length){
					this.errorText = "长度超出限制";
					return null;
				}
				if(this.empty == false && this.value.length == 0){
					this.errorText = "内容不可为空";
					return null;
				}
				return this.value;
			}
		}
	}
</script>

<style>
	@import "../../../common/zcss.css";
	view{
		flex-direction: column;
	}
	.answer-input{
		/* background-color: white; */
		margin-top: 5upx;
		/* width: 70%; */
		font-size: 40upx;
		height: 30upx;
		width: 600upx;
		border: 1upx solid gray;
	}
	.question{
		display: inline;
		font-size: 15upx;
	}
	#answer-view{
		flex-direction: row;
	}
	.tip{
		padding-top: 5upx;
		margin-left: 5upx;
		color: red;
		font-size: 30upx;
	}
	.count-text{
		/* margin-left: 10upx; */
		color: gray;
		font-size: 30upx;
	}
</style>
